/**
* @desc:  人员管理-添加人员，远程采集
* @author qiankui
* @date 2023-12-29 10:52:18
*/
<template>
    <div>
        <el-dialog append-to-body :close-on-click-modal="false" :visible="remoteCollectionFlag" class="zdy-dialog"
                   width="490px" height="380px" :title="$t('Remote collection')"
                   :before-close="handleCloseDialog">

<!--          远程设备目前不可用，无法进行采集操作。-->
          <el-alert
              v-if="isNoDevice"
              :title="$t('Remote collection Tips2')"
              type="warning"
              :closable="false"
              show-icon>
          </el-alert>
          <br v-if="isNoDevice">

          <el-form ref="form"   size="mini" :model="form" label-width="80px">
<!--            在线设备列表-->
            <el-form-item  :label="$t('Live List')">
<!--              请选择在线设备-->
              <el-select @change="devListChange" style="width: 70% !important;" v-model="form.deviceCode" :placeholder="$t('Please select a device')">
                <el-option
                    v-for="item in devList"
                    :key="item.deviceCode"
                    :label="item.deviceName"
                    :value="item.deviceCode">
                  <span style="float: left">{{ item.deviceName }}</span>
<!--                  在线、离线-->
<!--                  <span v-if="devList.length" style="float: right; color: #8492a6; font-size: 13px">{{ item.isOnline?this.i18n.t('on line'):this.i18n.t('offline') }}</span>-->
                </el-option>
              </el-select>
<!--              采集按钮-->
              <el-button size="small"  style="float: right" type="primary" :loading="gatherLoading" @click="gather">{{this.i18n.t('Collect')}}</el-button>
            </el-form-item>

<!--            等待设备返回采集结果中，请在远程设备上执行相关采集操作-->
            <p v-if="gatherLoading">{{this.i18n.t('Remote collection Tips1')}}</p>



<!--            <p v-if="!devList.length">{{this.i18n.t('Remote collection Tips2')}}</p>-->

<!--            <el-form-item>-->
<!--              <el-button type="primary" @click="">立即创建</el-button>-->
<!--              <el-button>取消</el-button>-->
<!--            </el-form-item>-->
          </el-form>

            <!--视频加载中loading动画-->
<!--            <i v-if="cameraLoading" style="color: #fff;position: absolute;left: 180px;top: 195px;font-size: 30px" class="el-icon-loading"></i>-->
            <!--视频显示区域-->
<!--            <video autoplay ref="video" id='video'></video>-->

          <div class="picView" v-if="showBase64Pic">

            <!--<img :src="showBase64Pic" alt="">-->
            <el-image
                style="width: 100%;height: 147px;"
                :src="showBase64Pic"
                fit="contain"></el-image>

            <div class="picTool">
              <div class="picToolView">
                <i class="el-icon-zoom-in toolIcon" @click="picPreview(0,0)"></i>
                <i class="el-icon-delete toolIcon" @click="removePic(0,0)"></i>
              </div>
            </div>
          </div>

          <br>
          <br>
          <div class="footBtnBox">
            <!--取消-->
            <el-button size="small" type="handle" @click="handleCloseDialog">{{this.i18n.t('Cancel')}}</el-button>
            <!--保存-->
            <el-button size="small" v-if="showBase64Pic" type="primary"  @click="save">
              {{this.i18n.t('save')}}
            </el-button>
          </div>

            <!--拍照按钮-->
<!--            <el-tooltip class="item" effect="light" :content="$t('take picture')" placement="top-start">-->
<!--                <el-button @click="snapFn" :disabled="!snap" :loading="snapLoading" class="cameraView" style="font-size: 25px" icon="el-icon-camera"-->
<!--                           circle></el-button>-->
<!--            </el-tooltip>-->

          <el-dialog @close="closePreview" append-to-body :visible.sync="dialogVisible" width="auto" style="text-align: center;">
            <img :src="showBase64Pic" alt="">
          </el-dialog>

        </el-dialog>

    </div>
</template>

<script>
import {deviceinfoGetallonlinedevicesbydevicetype,deviceinfoGetimagefromdevice} from "@/api/pcmj/sbsj";
import fa from "element-ui/src/locale/lang/fa";
    export default {
        name: "imageCollection",
        props: {
            tabsIndex: {
                type: Number,
                default: 0
            },
            picIndex: {
                type: Number,
                default: 0
            },
          remoteCollectionFlag: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
              isNoDevice:false,
              showBase64Pic:null,
              gatherSrc:null,
              devList:[],
              value: '',
              form:{
                deviceCode:null
              },
                snapLoading:false,
                cameraLoading:true,
                cameraErrMsg:'',
                snap: false,
                fileList: [],
                dialogImageUrl: '',
                dialogVisible: false,
                currentCamera: {
                    deviceId: null,
                    width: null,
                    height: null,
                    errMsg:null,
                    name:null,
                    searchStr:null
                },
                backcontext: null,
                videoRefs: null,
                outPutRefs: null,
                picViewFlag: false,
                saveLoading: false,
                waiteTime: 60000,
              gatherLoading: false,
                picViewSrc: null,
              time:Date.now() + 1000 * 60
            }
        },
        mounted() {
          this.deviceinfoGetallonlinedevicesbydevicetype()
        },
        methods: {
          devListChange(){
            this.removePic()
          },
          removePic() {
            this.showBase64Pic=null
          },
          picPreview() {
            this.dialogVisible=true
          },
          // 采集按钮
          gather(){
            this.picViewSrc=null
            var identityType=0
            switch (this.tabsIndex){
              // 人脸
              case 0:
                identityType=1
                break
              // 虹膜
              case 1:
                identityType=6
                break
              // 掌静脉
              case 2:
                identityType=2
                break
              // 掌纹
              case 3:
                identityType=5
                break
              // 指纹
              case 4:
                identityType=7
                break
            }
            var params={
              // 设备编号
              deviceCode:this.form.deviceCode,
              // 特征一级类型：人脸、掌静脉...
              identityType:identityType,
              // 特征二级类型（图片的下标）
              identitySubType:this.picIndex+1,
              // 超时时间
              waiteTime:this.waiteTime,
            }
            // var params={
            //   deviceCode:this.form.deviceCode,
            //   identityType:2,
            //   identitySubType:1,
            //   waiteTime:this.waiteTime,
            // }
            console.log('抓拍参数',params);
            this.gatherLoading=true
            deviceinfoGetimagefromdevice(params).then((res) => {
              if (res.code === 200) {
                this.showBase64Pic='data:image/png;base64,'+res.data
                // if (res.data.length){
                //   this.devList=res.data
                //   this.form.deviceCode=res.data[0].deviceCode
                // }

              }
            }).catch(err=>{

            }).finally(() => {
              this.gatherLoading=false
            })
          },
          // 获取在线设备
          deviceinfoGetallonlinedevicesbydevicetype(){
            var devType=this.tabsIndex
            // var devType=2
            deviceinfoGetallonlinedevicesbydevicetype(devType).then((res) => {
              if (res.code === 200) {
                if (res.data.length){
                  this.devList=res.data
                  this.form.deviceCode=res.data[0].deviceCode
                }else{
                  // 显示没有在线设备提示语
                  this.isNoDevice=true
                }

              }
            }).catch(err=>{

            }).finally(() => {

            })
          },
            calcelFn(){
                this.closePreview()
            },
          save(){
                this.saveLoading=true

                this.$emit('setPicFn',{
                    // tabsIndex:1,
                    tabsIndex:this.tabsIndex,
                    picIndex:this.picIndex,
                    showBase64Pic:this.showBase64Pic
                })
                this.saveLoading=false
                this.handleCloseDialog()
            },
            // 关闭图片预览弹窗
            closePreview() {
                this.dialogVisible = false
            },



            // 关闭拍照界面弹窗
            handleCloseDialog() {
                this.$emit('update:remoteCollectionFlag', false)
            },

        }
    }
</script>

<style scoped>
    #video {
        width: 100%;
        height: 270px;
        background: #000;
        border-radius: 12px;
    }
    .errorView{
        width: 460px;
        height: 275px;
        position: absolute;
        background-color: #202020;
        text-align: center;
        color: #fff;
        z-index: 2
    }
    .cameraView {
        width: 60px;
        height: 60px;
        /*color: #000 !important;*/
        /*border-radius: 100%;*/
        /*border: 1px solid red;*/
        /*display: flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        position: absolute;
        left: 400px;
        top: 180px;
        cursor: pointer;
    }

    .cameraView .el-icon-camera {
        /*color: #000 !important;*/
    }

    .cameraView:hover {
        /*color: #fff !important;*/
    }


    #outputCanvas {
        position: absolute;

        /*left: 0;*/
        /*top: 350px;*/

        left: -9999999999px;
        bottom: -9999999999999px;
    }
    .picView{
      height: 147px;
    }
    .picToolView{
      margin-top: 60px;
    }
</style>
